<template>
	<view>
		<view class="top">

		</view>
		<view class="bottom">
			<u-tabs class="bottom-tabs" inactiveStyle="color:#fff" :list="list1" @click="click" style="color: red;"></u-tabs>
			<view class="bottom-card1">
				<view v-for="(item, index) in filteredCoupons" :key="index" :class="['coupon-item', item.status === 0 ? 'active' : item.status === 1 ? 'used' : 'expired']">
					<view class="quan-top">
						<view>
							<view class="font1" v-if="item.triggerMoney <= 0">折扣券</view>
							<view class="font1" v-else>满{{item.triggerMoney}}元可用</view>
							<view class="font1">优惠卷数量：{{item.num}}</view>
						</view>
						<view class="qian">
							<u-icon style="margin-top: 20px;" name="rmb" color="#FFF" size="20"></u-icon>
							<template v-if="item.triggerMoney <= 0">
								<u--text color="#FEFEFE" size="50px" bold :text="item.discount"></u--text>
								<text class="discount-text">折</text>
							</template>
							<template v-else>
								<u--text decoration="line-through #FEFEFE" color="#FEFEFE" size="50px" bold :text="item.preferentialMoney"></u--text>
								<text class="discount-text">元</text>
							</template>
						</view>
						<view class="left-bottom-yuan"></view>
						<view class="right-bottom-yuan"></view>
					</view>
					<view class="quan-bottom">
						<view class="font3">有效期至：{{item.expirationStart}} - {{item.expirationEnd}}</view>
						<view class="font3" v-if="item.status === 0">去使用 ></view>
						<view class="font3" v-else-if="item.status === 1">已使用</view>
						<view class="font3" v-else>已过期</view>
						<view class="left-top-yuan"></view>
						<view class="right-top-yuan"></view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
import request from '../../../uitls/request';

	export default {
		data() {
			return {
				index: 0,

				list1: [{
					name: '待使用',
					index: 0
				}, {
					name: '已使用',
					index: 1
				}, {
					name: '已过期',
					index: 2
				}],
				userId:null,
				userCoupons: [], // 存储用户优惠券列表
				couponDetails: {} // 存储优惠券详细信息
			}
		},
		computed: {
			filteredCoupons() {
				// 根据当前选中的标签过滤优惠券，并且只显示数量大于0的优惠券
				return this.userCoupons.filter(coupon => 
					coupon.status === this.index && coupon.num > 0
				);
			}
		},
		methods: {
			click(item) {
				console.log('item', item);
				this.index = item.index
			},
			getCouponClass(status) {
				// 根据状态返回不同的样式类
				switch(status) {
					case 0: return 'quan';
					case 1: return 'quan1';
					case 2: return 'quan2';
					default: return 'quan';
				}
			},
			// 获取优惠券详细信息
			async getCouponDetails(couponId) {
				try {
					const res = await new Promise((resolve, reject) => {
						request({
							url: '/xsc/coupon/' + couponId,
							method: 'GET',
							success: resolve,
							fail: reject
						});
					});
					if (res.data.code === 200) {
						console.log(res.data.data)
						return res.data.data;
					}
					return null;
				} catch (error) {
					console.error('获取优惠券详情失败:', error);
					return null;
				}
			},
			// 加载用户优惠券
			async loadUserCoupons() {
				try {
					const res = await new Promise((resolve, reject) => {
						request({
							url: '/xsc/usercoupon/list',
							method: 'GET',
							data: {
								uId: this.userId,
								pageNum: 1,
								pageSize: 100
							},
							success: resolve,
							fail: reject
						});
					});

					if (res.data.code === 200) {
						// 获取所有优惠券的详细信息
						const coupons = res.data.rows;
						for (const coupon of coupons) {
							const details = await this.getCouponDetails(coupon.cId);
							if (details) {
								this.couponDetails[coupon.cId] = details;
								// 合并用户优惠券信息和优惠券详情，保留usercoupon表中的num和status
								this.userCoupons.push({
									...details,
									num: coupon.num,  // 使用usercoupon表中的num
									status: coupon.status  // 使用usercoupon表中的status
								});
							}
						}
					}
				} catch (error) {
					console.error('加载用户优惠券失败:', error);
					uni.showToast({
						title: '加载优惠券失败',
						icon: 'none'
					});
				}
			}
		},
		onLoad() {
			// 获取用户信息
			const userInfo = uni.getStorageSync('userInfo');
			this.userInfo = userInfo;
			this.userId = userInfo?.id;
			
			// 输出用户ID到控制台
			console.log('当前用户ID:', this.userId);
			console.log('完整用户信息:', this.userInfo);
			
			if (this.userId) {
				this.loadUserCoupons();
			} else {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				});
			}
		}
	}
</script>

<style>
	.top {
		width: 100%;
		height: 300rpx;
		background: linear-gradient(180deg, #FF7500, #FF9D6A);
		position: relative;
	}

	.bottom {
		margin: 0 30rpx;
		position: relative;
		z-index: 1;
	}

	.bottom-card1 {
		min-height: 300rpx;
		background-color: #8b8c8b;
		border-radius: 20rpx;
		padding: 30rpx 0;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		margin-top: -100rpx;
	}

	.bottom-tabs {
		margin-top: -250rpx;
		margin-left: 20%;
		/* #ifdef MP-WEIXIN */
		margin-top: -200rpx;
		/* #endif */
	}

	.coupon-item {
		top: 60rpx;
		margin: 20rpx;
		height: 280rpx;
		border-radius: 16rpx;
		position: relative;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.coupon-item.active {
		background: linear-gradient(135deg, #FF7500, #FF9D6A);
	}

	.coupon-item.used {
		background: linear-gradient(135deg, #FFBB99, #FFD6C4);
	}

	.coupon-item.expired {
		background: linear-gradient(135deg, #BFBFBF, #D9D9D9);
	}

	.qian {
		height: 180rpx;
		width: 35%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.font1 {
		margin-top: 4rpx;
		font-size: 28rpx;
		font-weight: 600;
		color: #FFF;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}

	.font2 {
		margin-top: 20rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #FFF;
	}

	.font3 {
		color: #FFF;
		font-size: 24rpx;
		opacity: 0.9;
	}

	.quan-top {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: dashed 2rpx rgba(255, 255, 255, 0.5);
		position: relative;
		box-sizing: border-box;
		height: 180rpx;
	}

	.quan-bottom {
		margin: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		box-sizing: border-box;
		height: 60rpx;
	}
	
	.left-bottom-yuan, 
	.right-bottom-yuan,
	.left-top-yuan,
	.right-top-yuan {
		width: 40rpx;
		height: 40rpx;
		background-color: #fff;
		position: absolute;
		overflow: hidden;
		border: 2rpx solid #fff;
		box-sizing: border-box;
	}
	
	.left-bottom-yuan {
		bottom: -4rpx;
		left: -2rpx;
		border-top-right-radius: 100%;
	}
	
	.right-bottom-yuan {
		bottom: -4rpx;
		right: -4rpx;
		border-top-left-radius: 100%;
	}
	
	.left-top-yuan {
		top: -40rpx;
		left: -44rpx;
		border-bottom-right-radius: 100%;
	}

	.right-top-yuan {
		top: -40rpx;
		right: -44rpx;
		border-bottom-left-radius: 100%;
	}

	.discount-text {
		color: #ffffff;
		font-size: 36rpx;
		margin-left: 8rpx;
		margin-top: 20rpx;
		font-weight: 600;
	}

	/* 添加优惠券左侧装饰 */
	.coupon-item::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 20rpx;
		height: 40rpx;
		background: #fff;
		border-radius: 0 20rpx 20rpx 0;
		box-shadow: 4rpx 0 8rpx rgba(0, 0, 0, 0.1);
	}

	/* 添加优惠券右侧装饰 */
	.coupon-item::after {
		content: '';
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 20rpx;
		height: 40rpx;
		background: #fff;
		border-radius: 20rpx 0 0 20rpx;
		box-shadow: -4rpx 0 8rpx rgba(0, 0, 0, 0.1);
	}

	/* 优化金额显示 */
	.amount-display {
		display: flex;
		align-items: baseline;
	}

	/* 优化标签样式 */
	.status-tag {
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 0.2);
		font-size: 24rpx;
	}

	/* 适配小程序 */
	/* #ifdef MP-WEIXIN */
	.bottom-card1 {
		margin-top: -80rpx;
	}

	.coupon-item {
		margin: 16rpx;
	}

	.quan-top {
		padding: 24rpx;
	}

	.quan-bottom {
		margin: 16rpx 24rpx;
	}
	/* #endif */
</style>